<!--
键盘事件：
    onkeydown事件: 不区分大小写

    onkeypress事件: 区分大小写
        不是所有键(例如 ALT、CTRL、SHIFT、ESC)都会在所有浏览器中触发 onkeypress 事件。
        如需只检测用户是否按下了某个键，请改用 onkeydown 件，因为它适用于所有钟，
        而且提供了一些事件对这些特殊事件进行了处理
        ctrlKey 事件：返回触发按键中是否按下了 ctrl 键
        altKey 事件：返回触发按键中是否按下了 alt 键
        shiftKey 事件：返回触发按键中是否按下了 shift 键

    onkeyup事件: 
    
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="我是一个输入框" onkeyup="myOnKeyUp()">
</body>

<script>
    // 1. onkeydown
    // // 事件源
    // let input=document.querySelector("input");
    // // 绑定事件
    // input.onkeydown=function(event){
    //     console.log("输入框正在输入");

    //     // 查看键盘按下的是哪一个键位
    //     let a=event.keyCode;
    //     console.log(a);// 这里输出的是这个按下的键位的编码
    //     let b=String.fromCharCode(a);// 将 键位编码 转化为 键位字符
    //     console.log(b);
    // }


    // 2. onkeypress
    // // 事件源
    // let input=document.querySelector("input");
    // // 绑定事件
    // input.onkeydown=function(event){
    //     console.log("输入框正在输入");

    //     // 查看键盘按下的是哪一个键位
    //     let a=event.keyCode;
    //     console.log(a);// 这里输出的是这个按下的键位的编码
    //     let b=String.fromCharCode(a);// 将 键位编码 转化为 键位字符
    //     console.log(b);
    // }

    // 3. onkeyup
    function myOnKeyUp(){
        console.log("按键被抬起");
    }

    // 4. 特殊键位
    let input=document.querySelector("input");
    // 绑定事件
    input.onkeydown=function(event){
        console.log("输入框正在输入");

        // // 查看键盘按下的是哪一个键位
        // let a=event.keyCode;
        // console.log(a);// 这里输出的是这个按下的键位的编码
        // let b=String.fromCharCode(a);// 将 键位编码 转化为 键位字符
        // console.log(b);

        if(event.shiftKey){
            alert("shift 键被按下");
        }
        if(event.altKey){
            alert("alt 键被按下");
        }
    }

    
    
</script>

</html>